<template>
  <!--  -->
  <el-table
    style="width: 100%; height: calc(100vh - 150px); overflow-y: scroll"
    :data="tableData.d"
    @selection-change="handleSelectionChange"
    header-row-class-name="tableRowClassName"
  >
    <!-- <el-table-column type="selection" width="55" /> -->
    <el-table-column align="center" prop="name" label="图片" width="150">
      <template #default="scope">
        <div style="z-index: inherit" class="demo-image__preview">
          <el-image
            style="width: 150px; height: 150px"
            :src="scope.row.primary_image"
            :zoom-rate="1.2"
            :max-scale="7"
            :z-index="9999999999"
            :min-scale="0.2"
            :preview-src-list="[scope.row.primary_image]"
            :initial-index="4"
            fit="cover"
            :preview-teleported="true"
            :teleported="true"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="clientId" label="标题" width="380">
      <template #default="scope">
        <!-- <span style="font-weight: 700;">分类:</span> {{ scope.row.category1 }}/{{ scope.row.category3 }}
 <br> -->
        <span style="font-weight: 700">标题:</span>

        <a :href="scope.row.linkUrl" target="_blank"> {{ scope.row.name }}</a>

        <!-- <br>
 <span style="font-weight: 700;">sku:</span> {{  scope.row.sku}} -->
      </template>
    </el-table-column>
    <el-table-column align="center" prop="createTime" label="操作">
      <template #default="scope">
        <div style="text-align: center">
          <el-popconfirm @confirm="dele(scope.row.id)" title="确定删除吗？">
            <template #reference>
              <span
                class="bsd"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-icon><Delete /></el-icon> 删除
              </span>
            </template>
          </el-popconfirm>

          <br />
          <span
            @click="bianji(scope.row)"
            class="bsd"
            style="display: flex; justify-content: center; align-items: center"
          >
            <el-icon class="des"><Edit /></el-icon> 编辑
          </span>
        </div>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="createTime" label="链接">
      <template #default="scope">
        <a target="_blank" :href="scope.row.link">
          {{ scope.row.link }}
        </a>
      </template>
    </el-table-column> -->
    <el-table-column prop="updateTime" align="center" label="创建时间">
      <template #default="scope">
        <span style="font-weight: 700"></span>{{ scope.row.createTime }}
        <br />
        <!-- <span style="font-weight: 700">创建人:</span>{{ scope.row.createBy }} -->
      </template>
    </el-table-column>
    <el-table-column align="center" prop="updateTime" label="SKU">
      <template #default="scope"> {{ scope.row.sku }} </template>
    </el-table-column>
    <el-table-column align="center" prop="updateTime" label="平均售价">
      <template #default="scope"> {{ scope.row.price }} </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 10px; display: flex; justify-content: center">
    <el-pagination
      :total="total"
      background
      @change="fchange"
      :page-size="tiao.pageSize"
      layout="prev, pager, next"
    />
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="编辑商品"
    width="100%"
    :before-close="handleClose"
  >
    <div style="height: calc(100vh - 150px); overflow-y: scroll">
      <el-form
        size="large"
        ref="ruleFormRef"
        style="max-width: 800px"
        :model="ruleForm"
        :rules="rules"
        label-width="240"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="" prop="seva">
          <template #label>
            <span style="font-size: 12px; font-weight: 700; color: #000">
              商品类别
              <i class="el-icon-question"></i
            ></span>
          </template>
          <el-cascader
            style="width: 100%"
            filterable
            v-model="ruleForm.seva"
            :options="tableData.options"
            @change="handleChange"
            :props="{
              value: 'description_category_id',
              label: 'category_name',
              children: 'children',
              leaf: 'type_id', // 将第三级的属性名改为 type_id
            }"
          />
        </el-form-item>

        <el-form-item label="" prop="name">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品标题（注意，这里平台规定要用俄文）"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                商品标题<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input
            v-model="ruleForm.name"
            placeholder="商品标题（注意，这里平台规定要用俄文）"
          />
        </el-form-item>

        <!-- <el-form-item label="" prop="currency_code">
          <template #label>
            <span style="font-size: 12px; font-weight: 700; color: #000">
              价格显示的货币
              <i class="el-icon-question"></i
            ></span>
          </template>
          <el-select
            v-model="ruleForm.currency_code"
            placeholder="选择货币"
            size="large"
          >
            <el-option
              v-for="item in bi"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="" prop="depth">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="这里实际应该是长度"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                包装厚度
              </span>
            </el-tooltip>
          </template>
          <el-input-number v-model="ruleForm.depth" />
        </el-form-item> -->
        <!-- <el-form-item label="" prop="dimension_unit">
          <template #label>
            <span style="font-size: 12px; font-weight: 700; color: #000">
              尺寸测量单位
              <i class="el-icon-question"></i
            ></span>
          </template>
          <el-select
            v-model="ruleForm.dimension_unit"
            placeholder="选择尺寸"
            size="large"
          >
            <el-option
              v-for="item in dan"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->

        <el-form-item label="" prop="images">
          <template #label>
            <span style="font-size: 12px; font-weight: 700; color: #000">
              商品图片
              <i class="el-icon-question"></i
            ></span>
          </template>
          <tuchuan
            :value="shnging.a"
            @und="
              (e) => {
                ruleForm.images =
                  (ruleForm.images ? ruleForm.images + ',' : '') + e.url;
              }
            "
            @shan="shan"
          />
          <p>建议图片长宽比1：1</p>
        </el-form-item>

        <el-form-item label="" prop="primary_image">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品主图只能有一个，也可以为空，为空是images的第一个会成为主图"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                商品主图
                <i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <tuchuan
            :value="shnging.b"
            :limit="1"
            @zshan="
              (e) => {
                ruleForm.primary_image = '';
              }
            "
            @unsd="
              (e) => {
                ruleForm.primary_image =
                  (ruleForm.primary_image ? ruleForm.primary_image + ',' : '') +
                  e.url;
              }
            "
            @shan="shan"
          />
          <p>建议图片长宽比1：1</p>
        </el-form-item>

        <el-form-item label="">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品原价"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                原价<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input v-model="ruleForm.old_price" placeholder="商品原价" />
        </el-form-item>

        <el-form-item label="" prop="price">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品价格"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                价格<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input v-model="ruleForm.price" placeholder="商品价格" />
        </el-form-item>

        <!-- <el-form-item label="" prop="vat">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="一共三档，0,0.1，0.2"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                增值税税率<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input v-model="ruleForm.vat" placeholder="增值税税率" />
        </el-form-item> -->

        <el-form-item label="" prop="weight">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="最大值为换算后的1000kg，即1000000g或者1000kg"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                商品重量<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input v-model="ruleForm.weight" placeholder="商品重量" />
        </el-form-item>

        <el-form-item label="" prop="weight_unit">
          <template #label>
            <span style="font-size: 12px; font-weight: 700; color: #000">
              测重单位
              <i class="el-icon-question"></i
            ></span>
          </template>
          <el-select
            v-model="ruleForm.weight_unit"
            placeholder="选择测重单位"
            size="large"
          >
            <el-option
              v-for="item in danw"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="" prop="width">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="包装宽度"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                包装宽度<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input-number v-model="ruleForm.width" placeholder="包装宽度" />
        </el-form-item> -->

        <el-form-item label="" prop="warehouse_id">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="仓库"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                仓库<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-select v-model="ruleForm.warehouse_id" placeholder="选择仓库">
            <el-option
              v-for="item in tableData.cang"
              :key="item.name"
              :label="item.name"
              :value="item.warehouse_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="stock">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="包装宽度"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                仓库数量<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input-number v-model="ruleForm.stock" placeholder="仓库数量" />
        </el-form-item>
        <!-- 
        <el-form-item label="">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品视频名称"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                商品视频名称<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input
            style="width: 240px"
            v-model="ruleForm.videoList[0].videoName"
            placeholder="商品视频名称"
          />
        </el-form-item> -->

        <el-form-item label="">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品视频"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                商品视频<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>

          <fileupload
            :fileSize="20"
            :limit="1"
            :value="ruleForm.videoList[0].videoUrl"
            :fileType="['mp4', 'WebM', 'MOV', 'QT', 'FLV', 'AVI']"
            @undv="
              (e) => {
                ruleForm.videoList[0].videoUrl = e.url;
              }
            "
            @shishan="
              () => {
                ruleForm.videoList[0].videoUrl = '';
              }
            "
          />
        </el-form-item>
        <!-- 
        <el-form-item label="">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="商品视频名称"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                封面视频<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <el-input
            style="width: 240px"
            v-model="ruleForm.videoList[1].videoName"
            placeholder="封面视频"
          />
        </el-form-item> -->

        <el-form-item label="">
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              content="封面视频"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                封面视频<i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>

          <fileupload
            :limit="1"
            :fileSize="20"
            :value="ruleForm.videoList[1].videoUrl"
            :fileType="['mp4', 'WebM', 'MOV', 'QT', 'FLV', 'AVI']"
            @undv="
              (e) => {
                ruleForm.videoList[1].videoUrl = e.url;
              }
            "
            @shishan="
              () => {
                ruleForm.videoList[0].videoUrl = '';
              }
            "
          />
        </el-form-item>

        <el-form-item
          v-for="(item, idnex) in tableData.attribute"
          :key="item.id"
          :label="item.name"
          v-show="
            item.name !== 'Ozon.视频： 名称' &&
            item.name !== 'Ozon视频： 链接' &&
            item.name !== 'Ozon.视频封面：链接'
          "
          :prop="`attributeList[${idnex}].values[${0}].value`"
          :rules="[
            {
              required: item.is_required,
              message: item.name + '不可为空',
              trigger: 'change',
            },
          ]"
        >
          <template #label>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.description"
              placement="top-start"
            >
              <span style="font-size: 12px; font-weight: 700; color: #000">
                {{ item.name }}

                <!-- {{ item.id }} -->
                <i class="el-icon-question"></i
              ></span>
            </el-tooltip>
          </template>
          <!-- 
          <el-cascader
            v-if="item.name == '类型'"
            style="width: 400px"
            filterable
            @change="
              (e) => {
                ruleForm.attributeList[idnex].values[0].value = e[e.length - 1];
              }
            "
            v-model="ruleForm.attributeList[idnex].values[0].value"
            :options="tableData.options"
            :props="{
              value: 'description_category_id',
              label: 'category_name',
              children: 'children',
              leaf: 'type_id', // 将第三级的属性名改为 type_id
            }"
          /> -->

          <el-input
            v-show="
              item.name !== '品牌' &&
              item.name !== 'PDF 文件' &&
              item.description !== '封面视频名称' &&
              tableData.xiala.length &&
              !tableData.xiala[idnex].optional
            "
            @change="(e) => {}"
            v-model="ruleForm.attributeList[idnex].values[0].value"
            :placeholder="item.description"
          />

          <!-- <el-select
            v-if="item.name == '品牌'"
            filterable
            remote
            reserve-keyword
            v-model="ruleForm.attributeList[idnex].values[0].value"
            :placeholder="item.description"
            :remote-method="
              (query) => {
                remoteMethod(query, item.id);
              }
            "
            :loading="loading"
          >
            <el-option
              v-for="item in daioption"
              :key="item.name"
              :label="item.info"
              :value="item.name"
            />
          </el-select> -->
          <!-- {{ tableData.xiala.length ? tableData.xiala[idnex].search : 0 }} -->
          <el-select
            v-if="
              tableData.xiala.length &&
              tableData.xiala[idnex].optional &&
              tableData.xiala[idnex].search
            "
            :remote="tableData.xiala[idnex].search"
            :filterable="tableData.xiala[idnex].search"
            v-model="ruleForm.attributeList[idnex].values[0].value"
            :placeholder="item.description"
            :remote-method="
              (query) => {
                remoteMethods(query, item.id);
              }
            "
          >
            <el-option
              v-for="item in daioption"
              :key="item.name"
              :label="item.info"
              :value="item.name"
            />
          </el-select>

          <el-select
            v-if="
              tableData.xiala.length &&
              tableData.xiala[idnex].optional &&
              !tableData.xiala[idnex].search
            "
            v-model="ruleForm.attributeList[idnex].values[0].value"
            :placeholder="item.description"
          >
            <el-option
              v-for="item in tableData.xiala[idnex].children"
              :key="item.name"
              :label="item.info"
              :value="item.name"
            />
          </el-select>

          <fileupload
            :value="ruleForm.attributeList[idnex].values[0].value"
            v-if="item.name == 'PDF 文件'"
            @und="
              (e) => {
                ruleForm.attributeList[idnex].values[0].value = e.url;
              }
            "
            :fileType="['pdf']"
          />
          <fileupload
            :value="ruleForm.attributeList[idnex].values[0].value"
            :fileType="['mp4', 'WebM', 'MOV', 'QT', 'FLV', 'AVI']"
            v-if="item.name == 'Ozon视频： 链接'"
            @undv="
              (e) => {
                ruleForm.attributeList[idnex].values[0].value =
                  (ruleForm.attributeList[idnex].values[0].value
                    ? ruleForm.attributeList[idnex].values[0].value + ','
                    : '') + e.url;
                console.log(ruleForm.attributeList[idnex].values[0].value);
              }
            "
          />

          <fileupload
            :limit="1"
            :value="ruleForm.attributeList[idnex].values[0].value"
            :fileType="['mp4', 'WebM', 'MOV', 'QT', 'FLV', 'AVI']"
            v-if="item.name == 'Ozon.视频封面：链接'"
            @undv="
              (e) => {
                ruleForm.attributeList[idnex].values[0].value =
                  (ruleForm.attributeList[idnex].values[0].value
                    ? ruleForm.attributeList[idnex].values[0].value + ','
                    : '') + e.url;
                console.log(ruleForm.attributeList[idnex].values[0].value);
              }
            "
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="width: 100%; text-align: center; margin-top: 20px">
        <el-button
          style="
            background-color: rgb(78 168 185);

            height: 30px;
            border-radius: 10px;
          "
          type="primary"
          @click="xsubmitForm(ruleFormRef)"
        >
          仅保存
        </el-button>
        <el-button
          style="
            background-color: rgb(78 168 185);

            height: 30px;
            border-radius: 10px;
          "
          type="primary"
          @click="submitForm(ruleFormRef)"
        >
          保存并上传
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- <ccc /> -->
</template>

<script setup>
import tuchuan from "../utils/tuchuan.vue";
import fileupload from "../utils/fileupload.vue";
import {
  shoudele,
  tezheng,
  shoulist,
  getshu,
  pinpai,
  bina,
  cahngku,
  tesou,
  texiala,
} from "../../api/index";
import {ref, onMounted, reactive, onUpdated, defineProps, watch} from "vue";
import updload from "../../utils/upload/imgupload.vue";
import {h} from "vue";
import {ElNotification} from "element-plus";
const handleSelectionChange = (e) => {};

const shnging = reactive({a: [], z: []});
const ruleFormRef = ref();
const daioption = ref([]);
const loading = ref(false);
const remoteMethods = (query, id) => {
  daioption.value = [];

  if (query) {
    loading.value = true;
    // getpinpai
    tesou({
      pageNum: 1,
      pageSize: 100,
      name: query,
      attributeId: id,
      descriptionCategoryId: ruleForm.seva[1],
      typeId: ruleForm.seva[2],
    }).then((result) => {
      result.rows;

      loading.value = false;
      daioption.value = result.rows.filter((item) => {
        return (
          item.name.toLowerCase().includes(query.toLowerCase()) ||
          item.info.toLowerCase().includes(query.toLowerCase())
        );
      });
    });
    setTimeout(() => {}, 200);
  } else {
    daioption.value = [];
  }
};

const remoteMethod = (query, id) => {
  daioption.value = [];
  if (query) {
    loading.value = true;
    // getpinpai
    pinpai({
      pageNum: 1,
      pageSize: 100,
      name: query,
      attributeId: id,
      descriptionCategoryId: ruleForm.seva[1],
      typeId: ruleForm.seva[2],
    }).then((result) => {
      result.rows;

      loading.value = false;
      daioption.value = result.rows.filter((item) => {
        return item.name.toLowerCase().includes(query.toLowerCase());
      });
    });
    setTimeout(() => {}, 200);
  } else {
    daioption.value = [];
  }
};

const dan = reactive([
  {
    label: "毫米",
    value: "mm",
  },
  {
    label: "厘米",
    value: "cm",
  },
  {
    label: "英寸",
    value: "in",
  },
]);

const danw = reactive([
  {
    label: "克",
    value: "g",
  },
  {
    label: "公斤",
    value: "kg",
  },
  {
    label: "磅",
    value: "lb",
  },
]);

const shan = (e) => {
  setTimeout(() => {
    let aa = ruleForm.images.split(",");
    aa.forEach((item, index) => {
      if (item.includes(e.response ? e.response.url : e.url)) {
        aa.splice(index, 1);
      }
    });
    ruleForm.images = aa.join(",");
  });
};

const rules = reactive({
  seva: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  currency_code: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  depth: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  dimension_unit: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  images: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  name: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  price: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  vat: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  weight: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  weight_unit: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  warehouse_id: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  stock: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
  width: [
    {
      required: true,
      message: "不可为空",
      trigger: "change",
    },
  ],
});

const bianji = (item) => {
  ruleForm.id = item.id;
  ruleForm.offer_id = item.offer_id;
  ruleForm.stock = item.stock;
  ruleForm.name = item.name;
  ruleForm.width = item.width;
  ruleForm.old_price = item.old_price;
  ruleForm.weight_unit = item.weight_unit;
  ruleForm.currency_code = item.currency_code;
  ruleForm.price = item.price;
  ruleForm.warehouse_id = item.warehouse_id;
  if (item.videoList && item.videoList.length) {
    ruleForm.videoList = item.videoList;
  }

  ruleForm.vat = item.vat;
  ruleForm.weight = item.weight;
  ruleForm.primary_image = item.primary_image;

  shnging.b = item.primary_image;
  ruleForm.offer_id = item.offer_id;
  (ruleForm.seva[0] = item.categoryId),
    (ruleForm.seva[1] = item.description_category_id),
    (ruleForm.seva[2] = item.typeId),
    (ruleForm.images = item.images);

  if (!ruleForm.seva.includes(null)) {
    handleChange(null, item);
  }
  // shnging.a = item.images.split(",");
  shnging.a = item.images;
  dialogVisible.value = true;
};
const ruleForm = reactive({
  seva: [],
  id: "",
  width: "",
  stock: 0,
  is_publish: 0,
  attributeList: [],
  old_price: "",
  weight_unit: "",
  dimension_unit: undefined,
  currency_code: undefined,
  images: "",
  name: "",
  price: "",
  vat: "",
  weight: "",
  primary_image: "",
  warehouse_id: "",
  offer_id: "",
  videoList: [
    {videoName: "", videoUrl: "", videoType: "1"},
    {videoName: "", videoUrl: "", videoType: "0"},
  ],
});

const xsubmitForm = () => {
  ruleForm.is_publish = 0;
  bina(ruleForm).then((res) => {
    dialogVisible.value = false;

    ElNotification({
      title: "提示",
      message: h("i", {style: "color: teal"}, "保存成功"),
    });
    getxiaoshou();
  });
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.is_publish = 1;
      bina(ruleForm).then((res) => {
        dialogVisible.value = false;

        ElNotification({
          title: "提示",
          message: h("i", {style: "color: teal"}, "保存成功"),
        });
        getxiaoshou();
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const bi = reactive([
  {
    label: "俄罗斯卢布",
    value: "RUB",
  },
  {
    value: "BYN",
    label: "白俄罗斯卢布",
  },
  {
    value: "KZT",
    label: "坚戈",
  },
  {
    value: "EUR",
    label: "欧元",
  },
  {
    value: "USD",
    label: "美元",
  },
  {
    value: "CNY",
    label: "人民币",
  },
]);
const dialogVisible = ref(false);
const dele = async (id) => {
  const a = await shoudele(id);

  if (a.code == 200) {
    ElNotification({
      title: "提示",
      message: h("i", {style: "color: teal"}, "删除成功！"),
    });
    getxiaoshou();
  }
};
const sss = () => {
  console.log(ruleForm);
};

const handleChange = (item, dat) => {
  ruleForm.categoryId = ruleForm.seva[0];
  ruleForm.description_category_id = ruleForm.seva[1];
  ruleForm.typeId = ruleForm.seva[2];
  tezheng({
    description_category_id: ruleForm.description_category_id,
    type_id: ruleForm.typeId,
  }).then((result) => {
    let ids = "";
    ruleForm.attributeList = [];
    tableData.xiala = [];
    for (let item of result.data.result) {
      ids = ids + item.id + ",";
      ruleForm.attributeList.push({
        complex_id: item.attribute_complex_id,
        id: item.id,
        values: [
          {
            dictionary_value_id: item.dictionary_id,
            value: undefined,
          },
        ],
      });
    }

    if (dat) {
      dat.attributeList.forEach((item, index) => {
        ruleForm.attributeList.forEach((i, n) => {
          if (i.id == item.id) {
            ruleForm.attributeList[n] = item;
          }
        });
      });
    }
    console.log(ruleForm.attributeList);
    texiala({
      ids,
      descriptionCategoryId: ruleForm.seva[1],
      typeId: ruleForm.seva[2],
    }).then((res) => {
      tableData.xiala = res.data;
    });
    tableData.attribute = result.data.result;
  });
};
const total = ref(0);
const tiao = reactive({
  pageNum: 1,
  pageSize: 10,
});

const tableData = reactive({
  attribute: [],
  d: [],
  options: [],
  pinop: [],
  cang: [],
  xiala: [],
});
const getcahngku = async () => {
  const {data} = await cahngku();
  tableData.cang = data;
};
getcahngku();
const getshus = async () => {
  const {data} = await getshu();
  tableData.options = data.result;

  // 获取数据后进行预处理，将第三级节点的 type_id 和 type_name 字段都替换为上级的相应字段
  // 获取数据后进行预处理，将第三级节点的 type_id 和 type_name 字段名都替换为上级的相应字段名
  const processedOptions = tableData.options.map((level1) => {
    return {
      ...level1,
      children: level1.children.map((level2) => {
        return {
          ...level2,
          children: level2.children.map((level3) => {
            return {
              ...level3,
              description_category_id: level3.type_id, // 将 type_id 字段名替换为 description_category_id
              category_name: level3.type_name, // 将 type_name 字段名替换为 category_name
            };
          }),
        };
      }),
    };
  });

  // 更新 el-cascader 组件的 options 属性为预处理后的数据
  tableData.options = processedOptions;
};
getshus();
const getxiaoshou = async () => {
  const data = await shoulist(tiao);
  tableData.d = data.rows;
  total.value = data.total;
};

const fchange = (e, i) => {
  tiao.pageNum = e;
  tiao.pageSize = i;
  getxiaoshou();
};
getxiaoshou();
</script>

<style lang="scss" scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.bsd {
  cursor: pointer;
  color: rgb(78 168 185);
  &:hover {
    color: rgb(145, 228, 244);
  }
}
.el-dialog {
  margin-top: 1vh !important;
}
</style>
